/* ===========================================================
   Fundacja Naturalnie Dzisiaj — wspólny arkusz marki
   Paleta i typografia wg księgi znaków.
   =========================================================== */

:root{
  /* Oficjalna paleta marki */
  --bottle:   #1e7250;   /* Bottle Green  */
  --forest:   #419d42;   /* Forest Green  */
  --nocturne: #1d2849;   /* Blue Nocturne */
  --cream:    #fff7e6;   /* Bright Cream  */

  /* Pochodne / robocze */
  --cream-2:  #f6edd8;          /* cieplejszy krem do kart  */
  --cream-3:  #efe4cd;          /* obrys / linie na kremie  */
  --forest-d: #357f36;          /* hover dla forest         */
  --bottle-d: #155539;          /* głębszy bottle           */
  --leaf-soft:#e8f1df;          /* bardzo jasny zielony tint*/
  --ink:      #1d2849;          /* tekst podstawowy = nocturne */
  --ink-60:   rgba(29,40,73,.62);
  --ink-40:   rgba(29,40,73,.42);
  --white:    #ffffff;

  --maxw: 1200px;
  --r-sm: 10px;
  --r-md: 18px;
  --r-lg: 28px;
  --r-xl: 40px;

  --ff-sans: "Montserrat", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --shadow-sm: 0 2px 10px rgba(29,40,73,.06);
  --shadow-md: 0 18px 50px -18px rgba(29,40,73,.22);
  --shadow-lg: 0 40px 90px -30px rgba(29,40,73,.30);
  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
}

*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
body{
  margin:0;
  font-family:var(--ff-sans);
  color:var(--ink);
  background:var(--cream);
  line-height:1.6;
  font-weight:400;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
img,svg{ display:block; max-width:100%; }
a{ color:inherit; text-decoration:none; }
button{ font-family:inherit; cursor:pointer; }
h1,h2,h3,h4{ margin:0; font-weight:700; line-height:1.08; letter-spacing:-0.01em; color:var(--nocturne); }
p{ margin:0; }
::selection{ background:var(--forest); color:#fff; }

/* ---- Układ ---- */
.wrap{ width:100%; max-width:var(--maxw); margin-inline:auto; padding-inline:40px; }

/* ---- Wspólny pasek nawigacji ---- */
.nav-mark{ display:flex; align-items:center; gap:12px; font-weight:800; letter-spacing:-0.01em; }
.nav-mark img{ height:38px; width:auto; }
.nav-mark .nm-t1{ font-size:12px; line-height:1; letter-spacing:.18em; text-transform:uppercase; color:var(--ink-60); font-weight:700; }
.nav-mark .nm-t2{ font-size:18px; line-height:1; color:var(--bottle); font-weight:800; }

/* ---- Przyciski ---- */
.btn{
  display:inline-flex; align-items:center; gap:10px;
  padding:15px 26px; border-radius:999px; border:2px solid transparent;
  font-weight:700; font-size:15px; letter-spacing:.01em;
  transition:transform .18s var(--ease-out), background .18s ease, box-shadow .18s ease, color .18s ease, border-color .18s ease;
  white-space:nowrap; cursor:pointer;
}
@media (hover:hover) and (pointer:fine){ .btn:hover{ transform:translateY(-2px); } }
.btn:active{ transform:scale(0.97); }
.btn-primary{ background:var(--forest); color:#fff; box-shadow:0 12px 26px -12px rgba(65,157,66,.7); }
.btn-primary:hover{ background:var(--forest-d); }
.btn-bottle{ background:var(--bottle); color:#fff; }
.btn-bottle:hover{ background:var(--bottle-d); }
.btn-ghost{ background:transparent; color:var(--bottle); border-color:var(--bottle); }
.btn-ghost:hover{ background:var(--bottle); color:#fff; }
.btn-cream{ background:var(--cream); color:var(--nocturne); }
.btn-cream:hover{ background:#fff; }

/* ---- Wspólne drobiazgi ---- */
.eyebrow{
  display:inline-flex; align-items:center; gap:9px;
  font-size:12.5px; font-weight:700; letter-spacing:.16em; text-transform:uppercase;
  color:var(--forest);
}
.eyebrow::before{ content:""; width:22px; height:2px; border-radius:2px; background:currentColor; }

/* sloty na zdjęcia użytkownika */
image-slot{ display:block; background:var(--leaf-soft); }

/* drobny listek-akcent (czysty kształt, nie ilustracja) */
.leaf-dot{ width:8px; height:8px; border-radius:50% 0 50% 50%; background:var(--forest); display:inline-block; }

/* ---- Reduced motion ---- */
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  .btn:hover, .btn:active{ transform:none; }
  .b-post a:hover .arr{ transform:none; }
}